<template>
    <project-list :table-data="tableData" :is-search="true" page-title="内部委托一览表" :page-icon="img3" :get-list="getList">
        <template #searchPc>
            <el-form ref="formRef" inline :model="formData" @keyup.enter="getList">
                <el-row :gutter="20">
                    <el-space wrap>
                        <el-col :span="7">
                            <el-form-item class="form-item" label="工程项目：" prop="conditions.projectName">
                                <el-input v-model="formData.projectName" clearable :suffix-icon="Search" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item class="form-item" label="所属基层单位：" prop="conditions.jcdwName">
                                <el-input v-model="formData.xmzgdwName" clearable :suffix-icon="Search" />
                            </el-form-item>
                        </el-col>
                    </el-space>
                </el-row>
            </el-form>
            <el-button class="searchBtn" type="primary" @click="getList">搜索</el-button>
        </template>
        <template #tablePc>
            <el-table
                v-loading="loading" :data="tableData" header-cell-class-name="table-header" row-key="gllxid"
                :row-class-name="setRowClass" @row-click="handleSelectionChange"
            >
                <el-table-column prop="projectName" label="项目名称" />
                <el-table-column prop="lxmc" label="合同名称" />
                <el-table-column prop="contractInitiationSqr" label="合同立项申请人" />
                <el-table-column prop="sqrq" label="合同立项申请日期" />
                <el-table-column prop="projectStatus" label="项目状态" />
                <el-table-column fixed="right" label="操作" align="center" width="150">
                    <template #default="scope">
                        <span class="lixiang">
                            <span
                                class="lixiangIconBox"
                                :class="scope.row.gllxid == selectedrowData?.gllxid ? 'left2' : 'left1'"
                            >
                                <el-image
                                    class="lixiangIcon" :src="lixiang1" fit="cover"
                                    @click.stop="handleSelectionChange(scope.row)"
                                />
                                <el-image
                                    class="lixiangIcon" :src="lixiang2" fit="cover"
                                    @click.stop="handleSelectionChange(scope.row)"
                                />
                            </span>
                        </span>
                    </template>
                </el-table-column>
            </el-table>

            <div class="paginationBox flexR-Cen">
                <pagination
                    v-model:total="total" v-model:page="paginationQuery.pageNo"
                    v-model:limit="paginationQuery.PageSize" layout="total, ->, prev, pager, next, jumper"
                    @pagination="getList" @update:limit="changeLimit"
                />
            </div>
        </template>
        <template #searchMob>
            <el-form ref="formRef" data-aos="fade-up" inline :model="formData" class="w100">
                <el-form-item prop="name" class="form-item">
                    <el-input
                        v-model="formData.conditionsprojectName" class="form-input" placeholder="请输入你需要搜索的项目"
                        :prefix-icon="Search"
                    />
                </el-form-item>
            </el-form>
        </template>
        <template #tableMob>
            <div
                v-for="(item, index) in tableData" :key="index" class="cardBox flexC-FS-C"
                :class="item.gllxid == selectedrowData.gllxid ? 'selected-row-color' : ''"
                @click="handleSelectionChange(item)"
            >
                <el-row :gutter="20" class="rowBox">
                    <el-col :span="24">
                        <el-row :gutter="20">
                            <el-col class="title-span" :span="6">项目名称</el-col>
                            <el-col class="value-span" :span="18">{{ item.projectName }}</el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="24" class="mt15">
                        <el-row :gutter="20">
                            <el-col class="title-span" :span="6">所属公司</el-col>
                            <el-col class="value-span" :span="18">{{ item.jcdwName }}</el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="24" class="mt15">
                        <el-row :gutter="20">
                            <el-col class="title-span" :span="6">项目状态</el-col>
                            <el-col class="value-span" :span="18">{{ item.projectStatus }}</el-col>
                        </el-row>
                    </el-col>
                </el-row>

                <div class="w100 flexR-FE-C">
                    <span class="lixiang">
                        <span
                            class="lixiangIconBox"
                            :class="item.gllxid == selectedrowData.gllxid ? 'left2' : 'left1'"
                        >
                            <el-image
                                class="lixiangIcon" :src="lixiang1" fit="cover"
                                @click.stop="handleSelectionChange(item)"
                            />
                            <el-image
                                class="lixiangIcon" :src="lixiang2" fit="cover"
                                @click.stop="handleSelectionChange(item)"
                            />
                        </span>
                    </span>
                </div>
            </div>
        </template>
    </project-list>
</template>

<script setup>
import { getProfessionalBranchListApi } from '@/api/projects'
import commonData from '@/hooks/commonData'
import projectsData from '@/hooks/projectsData'

const { initAos, Search, total, handleToContractDetails, paginationQuery, changeLimit, img3, lixiang1, lixiang2 } = commonData()

const formData = reactive({
    conditions: {
        projectName: '',
        xmzgdwName: ''
    }
})

const {
    formRef,
    loading,
    tableData,
    selectedrowData,
    setRowClass,
    handleSelectionChange,
    getList
} = projectsData({
    formData,
    paginationQuery,
    apiList: getProfessionalBranchListApi,
    initAos,
    handleToContractDetails,
    total,
    pageType: 'inletPage',
    inletPage: 1
})
</script>

<style lang='scss'>
[data-mode="pc"] {
    .projects {
        .form-item {
            margin-left: 20px;
            margin-bottom: 0;
            margin-right: 0;
        }
        .el-form-item__label {
            color: #000;
            font-size: 15px;
        }
        .el-form-item__content {
            width: 290px;
            background: rgb(255 255 255 / 90%);
            border-radius: 3px;
            // border: 1px solid #DCDCDC;
        }
        .searchBtn {
            height: 30px;
            padding: 0 23px;
            border-radius: 4px;
            margin-right: 40px;
        }
        .table-header {
            height: 54px;
            background: #f7fafb !important;
            font-size: 14px;
            color: rgb(0 0 0);
        }
        .table-row {
            height: 60px;
            font-size: 14px;
            border-bottom: 1px solid #f0f2f5;
        }
        .paginationBox {
            width: 100%;
            background: #fff;
            padding: 4px 0;
        }
    }
}
[data-mode="mobile"] {
    .projects {
        .form-item {
            width: 100%;
            margin: 0;
            .form-input {
                height: 45px;
            }
        }
        .cardBox {
            width: 100%;
            padding: 20px 16px 12px;
            background: #fff;
            margin-bottom: 10px;
            .rowBox {
                width: 100%;
                padding-bottom: 17px;
                margin-bottom: 17px;
                border-bottom: 1px dashed #979797;
                .title-span {
                    width: 56px;
                    font-size: 14px;
                    color: rgb(0 0 0);
                }
                .value-span {
                    font-size: 14px;
                    color: #666;
                }
            }
            .lixiang-button {
                border-radius: 15px;
            }
        }
    }
}
.lixiang {
    width: 30px;
    height: 30px;
    position: relative;
    overflow: hidden;
    display: inline-block;
    .lixiangIconBox {
        width: 60px;
        position: absolute;
        top: 0;
        transition: all 0.3s;
        .lixiangIcon {
            width: 30px;
            cursor: pointer;
        }
    }
    .left1 {
        left: 0;
    }
    .left2 {
        left: -30px;
    }
}
</style>
